<template>
  <div>
    <p>用户名:<input type="text" v-model="form.username" @blur="checkname"> {{error.username}}</p>
    <p>密码:<input type="text" v-model="form.password" @blur="checkpassword">{{error.password}}</p>
    <p>图形验证码: <input type="text" v-model="form.cpatchas" >
      <img :src="imgurl" alt="图形验证码" class="pic_code" @click="get_cpatcha"></p>
    <p>手机号:<input type="text" v-model="form.mobile"></p>
    <p>手机验证码<input type="text" v-model="form.veri" @blur="yanz">
      <button @click="checkveri" :disabled="flag">
      {{mes}}
      </button>
    </p>
    <p>
      <button @click="addregister">
        注册
      </button>
    </p>
  </div>
</template>

<script>
import {v4 as uuid4} from 'uuid'
export default {
  name: "day0303_register",
  data() {
    return {
      form: {},
      error: {username: '', password: ""},
      mes: '点击获取验证码',
      time:60,
      flag:false,
      imgurl:'',
      uuid:''
    }
  },
  methods: {
    //注册
    addregister() {
      this.checkveri()
      this.checkname()
      this.checkpassword()
      this.$axios.post('user/ZhuCe/',this.form).then(res=>{

      })
    },
    //用户
    checkname() {
      //是否有用户
      let name = this.form.username
      if (name == undefined) {
        this.error.username = '用户名不能为空'
        return false
      }
      //用户长短
      let reg = /\w{5,10}/
      if (!reg.test(name)) {
        this.error.username = '用户名格式不对'
        return false
      }
      //用户唯一 要在后台提交数据
      this.$axios.post('user/register/', this.form).then(res => {
        if (res.data.code == 11000) {
          this.error.username = '用户名不能为空'
        } else if (res.data.code == 11001) {
          this.error.username = '用户名格式不对'
        } else if (res.data.code == 11002) {
          this.error.username = '用户名已存在'
        }
        this.error.username = ''
      })
    },
    //密码
    checkpassword() {
      //是否有密码
      let pwd = this.form.password
      if (pwd == undefined) {
        this.error.password = '密码不能为空'
        return false
      }
      //密码长短
      let reg = /\w{8,20}/
      if (!reg.test(pwd)) {
        this.error.password = '密码名格式不对'
        return false
      }
      //密码 要在后台提交数据
      this.$axios.post('user/register/', this.form).then(res => {
        if (res.data.code == 11003) {
          this.error.password = '密码不能为空'
        } else if (res.data.code == 11004) {
          this.error.password = '密码格式不对'
        }
        this.error.password = ''
      })
    },
    //验证码发送
    checkveri(){
      this.$axios.post('user/verimanage/',{cpatchas:this.form.cpatchas,uuid:this.uuid,mobile:this.form.mobile}).then(res=>{
        if(res.data.code = 200){
          let m = setInterval(()=>{
            this.time --
            this.flag = true
            this.mes =this.time +'秒后重试'
            if(this.time == 0){
              clearInterval(m)
              this.time =60
              this.flag = false
              this.mes = '点击获取验证码'
            }
          },1000)
        }
      })
    },
    //短信验证码
    yanz(){
      this.$axios.post('user/register/',this.form).then(res=>{

      })
    },
    //生成图形验证码
    get_cpatcha(){
      this.uuid =uuid4()
      this.imgurl = 'http://127.0.0.1:8000/user/captcha/?uuid='+this.uuid
    }

  },

  mounted() {
    this.get_cpatcha()
  }

}
</script>

<style scoped>

</style>
